<script setup>
import { onMounted, getCurrentInstance, ref, defineProps } from 'vue';
import { createPopup } from '@/api/ol-api/popup';
import { useUserDateStore } from '@/stores/user';
import { storeToRefs } from 'pinia';
const userDateStore = useUserDateStore();
const { userData } = storeToRefs(userDateStore);
const { proxy } = getCurrentInstance();
const container = ref('');
const content = ref({});

const props = defineProps({
  layer_icon: Object,
});
// 获取数据做一个映射
const accidentLevel = {
  1: '严重事故',
  2: '中等事故',
  3: '轻度事故',
  4: '轻微事故',
};
const handleStatus = {
  0: '待处理',
  1: '正在处理',
  2: '已处理',
};
let popup = null;
onMounted(() => {
  const map = proxy.$map;
  //   console.log(map); // 获取地图实例
  /* 遮罩层 */
  popup = createPopup({
    container: container.value,
    map,
  });

  map.on('pointermove', function (e) {
    var pixel = map.getEventPixel(e.originalEvent);
    var hit = map.hasFeatureAtPixel(pixel);
    map.getTargetElement().style.cursor = hit ? 'pointer' : '';
  });

  /* 点击地图,存在要素就返回 */
  map.on('click', function (e) {
    // 获取当前点击的点是否存在要素, 并返回
    const feature = map.forEachFeatureAtPixel(
      e.pixel,
      function (feature, layer) {
        // 判断一下是否是传过来的标注图层,防止发布公告时,点到标注图层触发弹窗
        // console.log([layer, props.layer_icon]);
        if (layer === props.layer_icon) {
          return feature;
        }
      }
    );
    /* 存在要素就显示弹窗 */
    if (feature) {
      /* 让弹窗显示 */
      // console.log(feature);
      let center = e.coordinate;
      content.value = feature.values_.values_;
      // console.log(content.value);
      popup.setPosition(center);
      // console.log(popup);
    }
  });
});
/* 关闭弹窗 */
// 关闭弹窗函数需要写在onMounted生命周期外,才不是局部作用域
function closePopup() {
  popup.setPosition(null);
}
defineExpose({ closePopup }); // 暴露给父组件调用
</script>

<template>
  <div ref="container" class="ol-popup">
    <div class="title">
      事件详细信息
      <a
        href="javascript:void(0)"
        @click="closePopup"
        class="ol-popup-closer"
      ></a>
    </div>

    <div class="content">
      <!-- <h2>武汉</h2> -->
      <table>
        <tr>
          <th>事件等级</th>
          <td>{{ accidentLevel[content.事件等级] }}</td>
        </tr>
        <tr>
          <th>发生时间</th>
          <td>{{ content.发生时间 }}</td>
        </tr>
        <tr>
          <th>发生地点</th>
          <td>{{ content.发生地点 }}</td>
        </tr>
        <tr>
          <th>处理状态</th>
          <td>{{ handleStatus[content.处理状态] }}</td>
        </tr>
        <!-- 以下两列需要判断pinia内数据,限制普通用户查看 -->
        <tr v-if="userData.type !== 'common'">
          <th>车牌号</th>
          <td>{{ content.车牌号 }}</td>
        </tr>
        <tr v-if="userData.type !== 'common'">
          <th>用户名</th>
          <td>{{ content.驾驶员 }}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

<style scoped>
.ol-popup {
  width: 270px;
  padding-bottom: 20px;
  box-sizing: border-box;
  position: absolute;
  background-color: white;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  border-radius: 10px;
  border: 1px solid #cccccc;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 100px;
  z-index: 100;
  border-radius: 10px;
}

.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: ' ';
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 50%;
  transform: translateX(-50%);
}

.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}

.ol-popup-closer:after {
  content: '✖';
}
.title {
  background: #4a90e2;
  color: white;
  padding: 2px 5px;
}
.content {
  margin-top: 20px;
  padding: 0 15px;
}
.ol-popup table {
  border-collapse: collapse;
  margin: 0;
}
.ol-popup table,
th,
td {
  border: 1px solid #ccc;
}
.ol-popup th {
  padding: 2px 10px;
}
.ol-popup td {
  padding: 2px 5px;
  width: 150px;
}
</style>
